<template>
	<view class="container" style="padding-top: 10px;background-color: #fff;
			padding-bottom: 20px;">
		<view class="floor">
			<view class="title">报修标题 :</view>
			<view class="content">
				<input type="text" placeholder="请输入报修标题" v-model="dict.title" />
			</view>
		</view>
		<view class="floor">
			<view class="title">报修电话 :</view>
			<view class="content">
				<input type="text" placeholder="请输入报修电话" v-model="dict.applyPhone" />
			</view>
		</view>
		<view class="floor">
			<view class="title">姓名 :</view>
			<view class="content">
				<input type="text" placeholder="请输入业主姓名" v-model="dict.applyName" />
			</view>
		</view>
		<view class="floor">
			<view class="title">报修的内容 :</view>
			<view class="content">
				<input type="text" placeholder="请输入报修的内容" v-model="dict.applyContent" />
			</view>
		</view>
		<view class="floor">
			<view class="title">房间号 :</view>

			<view class="content">
				<input type="text" placeholder="请输入报修的房间号" disabled="true" v-model="dict.resourceName" />
				<!-- <picker @change="bindPickerChange2" :value="index2" :range="array2">
					<view class="uni-input">{{array2[index2]}}</view>
				</picker> -->
			</view>
		</view>
		<view class="floor">
			<view class="title">维修分类 :</view>
			<view class="content">
				<!-- dict.applyCategory -->
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view>{{array[index]}}</view>
				</picker>
			</view>
		</view>

		<view class="floor">
			<view class="title">图片(长按可删除)</view>
			<view class="content" style="border: none;height: 100px;">
				<image :src="item" v-for="(item,index) in picList" @longtap="deleteIt(item,index)"></image>
				<button @click="addPic">+</button>
			</view>
		</view>
		<button type="primary" style="width: 80%;margin: 20px auto;" @click="sendInfo();">提交</button>
	</view>
</template>

<script>
	import config from '@/config/config.js'

	import {
		insertConfigFlowRepairBlock,
		selectByOwnerId,
		fileUpload
	} from "@/api/home.js"
	export default {
		data() {
			return {
				picList: [],
				dict: {},
				array: ['水', '电', '其他'],
				index: 0,
				array2: [],
				array3: [],
				index2: 0,
				list: []
			}
		},
		onLoad() {
			var that = this;
			selectByOwnerId().then(res => {
				if (res.code == 200) {
					var arr = res.rows;
					for (var i = 0; i < arr.length; i++) {
						that.array2.push(arr[i].houseName)
					}
				}
			})
			this.dict.applyName = uni.getStorageSync("userName") || "";
			this.dict.applyPhone = uni.getStorageSync("phonenumber") || "";
			this.dict.resourceName = uni.getStorageSync("resourceName") || "";
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index2 = e.detail.value
			},
			sendInfo() {
				if (this.dict.title == null) {
					return uni.showToast({
						title: "请输入报修标题",
						icon: "none"
					})
				}
				if (this.dict.applyPhone == null) {
					return uni.showToast({
						title: "请输入报修电话",
						icon: "none"
					})
				}
				if (this.dict.applyName == null) {
					return uni.showToast({
						title: "请输入业主姓名",
						icon: "none"
					})
				}
				if (this.dict.applyContent == null) {
					return uni.showToast({
						title: "请输入报修内容",
						icon: "none"
					})
				}
				this.dict.applyCategory = this.array[this.index]
				this.dict.state = "待派工";
				this.dict.client = "小程序";
				this.dict.applyImg = this.picList.join(",");
				insertConfigFlowRepairBlock({
					...this.dict
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: "none",
							duration: 1000,
							success() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showToast({
							title: "操作失败",
							icon: "none"
						})
					}
				}).catch(err => {
					uni.showToast({
						title: "网络异常",
						icon: "none"
					})
				})
			},
			addPic() {
				var that = this;
				uni.chooseImage({
					success(res) {
						console.log(res);
						var arr = res.tempFilePaths;
						for (var i = 0; i < arr.length; i++) {
							uni.uploadFile({
								url: '/special/dictionary/files/upload/',
								header: {
									"Authorization": uni.getStorageSync("token"),
									"X-Requested-With": 'XMLHttpRequest',
									"Accept": "application/json"
								},
								method: "post",
								filePath: arr[i],
								fileType: 'image',
								name: 'file',
								formData: {
									'filea': arr[i]
								},
								success: (result) => {
									var json = JSON.parse(result.data);
									if (json.code == 200) {
										const redirectUri = `${config.baseUrl}`
										that.picList.push(redirectUri + json.msg)
									}
								}
							});
						}
					}
				})
			},
			deleteIt(item, index) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: "是否确认删除",
					success(res) {
						if (res.confirm == true) {
							that.picList.splice(index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-input {
		height: 70rpx !important;
		line-height: 70rpx !important;
	}

	.floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 5px;

		.title {
			float: left;
			width: 120px;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666666;
			background-color: #fff;
		}

		.content {
			float: left;
			width: calc(100% - 130px);
			height: 70rpx;
			line-height: 70rpx;
			border-bottom: 1px solid #ccc;

			uni-button {
				width: 50px;
				height: 50px;
				display: block;
				float: left;
				margin: 10px;
			}

			uni-image {
				width: 50px;
				height: 50px;
				display: block;
				float: left;
				margin: 10px;
			}
		}
	}
</style>